import React from 'react';

const KeyboardContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{
    padding: '32px',
    backgroundColor: '#2c3e50',
    borderRadius: '20px',
    boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
    margin: 'auto',
    width: '100%',
    maxWidth: '100%',
    boxSizing: 'border-box',
    border: '2px solid #34495e'
  }}>
    {children}
  </div>
);

const KeyRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{
    display: 'flex',
    justifyContent: 'center',
    gap: '0.5em',
    marginBottom: '0.8em',
    width: '100%',
    flexWrap: 'nowrap'
  }}>
    {children}
  </div>
);

interface KeyProps {
  width?: number;
  height?: number;
  active?: boolean;
  correct?: boolean;
  wrong?: boolean;
  finger?: 'pinky' | 'ring' | 'middle' | 'index' | 'thumb';
}

const Key: React.FC<KeyProps & { children: React.ReactNode }> = ({ width = 1, height = 1, active, correct, wrong, finger, children }) => {
  let backgroundColor = '#34495e';
  let color = '#ecf0f1';
  let borderColor = '#7f8c8d';
  
  if (active) {
    backgroundColor = '#f39c12';
    color = '#fff';
    borderColor = '#e67e22';
  } else if (correct) {
    backgroundColor = '#27ae60';
    color = '#fff';
    borderColor = '#2ecc71';
  } else if (wrong) {
    backgroundColor = '#e74c3c';
    color = '#fff';
    borderColor = '#c0392b';
  } else if (finger) {
    const fingerColors = {
      pinky: '#e74c3c',
      ring: '#f39c12', 
      middle: '#f1c40f',
      index: '#2ecc71',
      thumb: '#9b59b6'
    };
    backgroundColor = fingerColors[finger] + '40';
    borderColor = fingerColors[finger];
  }

  return (
    <div
      style={{
        width: `${width * 5.5}em`,
        height: `${height * 5.5}em`,
        backgroundColor,
        color,
        border: `3px solid ${borderColor}`,
        borderRadius: '12px',
        boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontWeight: 'bold',
        fontSize: '1.2em',
        cursor: 'pointer',
        userSelect: 'none',
        transition: 'all 0.2s ease',
        fontFamily: '"Courier New", monospace',
        textShadow: '1px 1px 2px rgba(0,0,0,0.3)'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-3px)';
        e.currentTarget.style.boxShadow = '0 6px 12px rgba(0,0,0,0.3)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
      }}
    >
      {children}
    </div>
  );
};

const HandGuidance: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px',
    backgroundColor: '#ecf0f1',
    padding: '16px',
    borderRadius: '8px'
  }}>
    {children}
  </div>
);

const HandLabel: React.FC<{ hand: 'left' | 'right'; children: React.ReactNode }> = ({ hand, children }) => (
  <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    fontSize: '24px',
    fontWeight: 'bold',
    color: hand === 'left' ? '#3498db' : '#e74c3c',
    textShadow: '1px 1px 2px rgba(0,0,0,0.1)'
  }}>
    {children}
  </div>
);

interface VirtualKeyboardProps {
  activeKey?: string;
  correctKeys?: string[];
  wrongKeys?: string[];
  showFingerGuide?: boolean;
  highlightFinger?: 'pinky' | 'ring' | 'middle' | 'index' | 'thumb';
}

const VirtualKeyboard: React.FC<VirtualKeyboardProps> = ({
  activeKey,
  correctKeys = [],
  wrongKeys = [],
  showFingerGuide = true,
  highlightFinger
}) => {
  
  // 手指映射表
  const fingerMap: Record<string, 'pinky' | 'ring' | 'middle' | 'index' | 'thumb'> = {
    // 左手小指
    '`': 'pinky', '1': 'pinky', 'q': 'pinky', 'a': 'pinky', 'z': 'pinky',
    'Tab': 'pinky', 'CapsLock': 'pinky', 'Shift': 'pinky',
    
    // 左手无名指  
    '2': 'ring', 'w': 'ring', 's': 'ring', 'x': 'ring',
    
    // 左手中指
    '3': 'middle', 'e': 'middle', 'd': 'middle', 'c': 'middle',
    
    // 左手食指
    '4': 'index', '5': 'index', 'r': 'index', 't': 'index', 
    'f': 'index', 'g': 'index', 'v': 'index', 'b': 'index',
    
    // 右手食指
    '6': 'index', '7': 'index', 'y': 'index', 'u': 'index',
    'h': 'index', 'j': 'index', 'n': 'index', 'm': 'index',
    
    // 右手中指
    '8': 'middle', 'i': 'middle', 'k': 'middle', ',': 'middle',
    
    // 右手无名指
    '9': 'ring', 'o': 'ring', 'l': 'ring', '.': 'ring',
    
    // 右手小指
    '0': 'pinky', '-': 'pinky', '=': 'pinky', 'p': 'pinky', '[': 'pinky', ']': 'pinky',
    ';': 'pinky', "'": 'pinky', '/': 'pinky', '\\': 'pinky',
    'Enter': 'pinky', 'Backspace': 'pinky',
    
    // 拇指
    ' ': 'thumb'
  };

  const getKeyProps = (key: string) => {
    const isActive = activeKey?.toLowerCase() === key.toLowerCase();
    const isCorrect = correctKeys.includes(key.toLowerCase());
    const isWrong = wrongKeys.includes(key.toLowerCase());
    const finger = showFingerGuide ? fingerMap[key.toLowerCase()] : undefined;
    
    return {
      active: isActive,
      correct: isCorrect,
      wrong: isWrong,
      finger: highlightFinger ? (finger === highlightFinger ? finger : undefined) : finger
    };
  };

  return (
    <div>
      {showFingerGuide && (
        <HandGuidance>
          <HandLabel hand="left">
            <span>🤚</span>
            <span style={{ fontSize: '1rem' }}>左手</span>
            <div style={{ display: 'flex', gap: '16px' }}>
              <div style={{ width: '24px', height: '24px', backgroundColor: '#e74c3c', borderRadius: '50%', boxShadow: '0 2px 6px rgba(231, 76, 60, 0.3)' }} title="小指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#f39c12', borderRadius: '50%', boxShadow: '0 2px 6px rgba(243, 156, 18, 0.3)' }} title="无名指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#f1c40f', borderRadius: '50%', boxShadow: '0 2px 6px rgba(241, 196, 15, 0.3)' }} title="中指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#2ecc71', borderRadius: '50%', boxShadow: '0 2px 6px rgba(46, 204, 113, 0.3)' }} title="食指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#9b59b6', borderRadius: '50%', boxShadow: '0 2px 6px rgba(155, 89, 182, 0.3)' }} title="拇指" />
            </div>
          </HandLabel>
          
          <h4 style={{ color: 'rgba(0, 0, 0, 0.87)', fontWeight: 'bold', textShadow: '1px 1px 2px rgba(0,0,0,0.1)', fontSize: '2.125rem', margin: 0 }}>
            手指位置引导
          </h4>
          
          <HandLabel hand="right">
            <div style={{ display: 'flex', gap: '16px' }}>
              <div style={{ width: '24px', height: '24px', backgroundColor: '#9b59b6', borderRadius: '50%', boxShadow: '0 2px 6px rgba(155, 89, 182, 0.3)' }} title="拇指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#2ecc71', borderRadius: '50%', boxShadow: '0 2px 6px rgba(46, 204, 113, 0.3)' }} title="食指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#f1c40f', borderRadius: '50%', boxShadow: '0 2px 6px rgba(241, 196, 15, 0.3)' }} title="中指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#f39c12', borderRadius: '50%', boxShadow: '0 2px 6px rgba(243, 156, 18, 0.3)' }} title="无名指" />
              <div style={{ width: '24px', height: '24px', backgroundColor: '#e74c3c', borderRadius: '50%', boxShadow: '0 2px 6px rgba(231, 76, 60, 0.3)' }} title="小指" />
            </div>
            <span style={{ fontSize: '1rem' }}>右手</span>
            <span>🤚</span>
          </HandLabel>
        </HandGuidance>
      )}

      <KeyboardContainer>
        {/* 数字行 */}
        <KeyRow>
          <Key {...getKeyProps('`')}>~<br/>`</Key>
          <Key {...getKeyProps('1')}>!<br/>1</Key>
          <Key {...getKeyProps('2')}>@<br/>2</Key>
          <Key {...getKeyProps('3')}>#<br/>3</Key>
          <Key {...getKeyProps('4')}>$<br/>4</Key>
          <Key {...getKeyProps('5')}>%<br/>5</Key>
          <Key {...getKeyProps('6')}>^<br/>6</Key>
          <Key {...getKeyProps('7')}>&<br/>7</Key>
          <Key {...getKeyProps('8')}>*<br/>8</Key>
          <Key {...getKeyProps('9')}>(<br/>9</Key>
          <Key {...getKeyProps('0')}>)<br/>0</Key>
          <Key {...getKeyProps('-')}>_<br/>-</Key>
          <Key {...getKeyProps('=')}>=<br/>=</Key>
          <Key width={2} {...getKeyProps('Backspace')}>Backspace</Key>
        </KeyRow>

        {/* QWERTY行 */}
        <KeyRow>
          <Key width={1.5} {...getKeyProps('Tab')}>Tab</Key>
          <Key {...getKeyProps('q')}>Q</Key>
          <Key {...getKeyProps('w')}>W</Key>
          <Key {...getKeyProps('e')}>E</Key>
          <Key {...getKeyProps('r')}>R</Key>
          <Key {...getKeyProps('t')}>T</Key>
          <Key {...getKeyProps('y')}>Y</Key>
          <Key {...getKeyProps('u')}>U</Key>
          <Key {...getKeyProps('i')}>I</Key>
          <Key {...getKeyProps('o')}>O</Key>
          <Key {...getKeyProps('p')}>P</Key>
          <Key {...getKeyProps('[')}>{}<br/>[</Key>
          <Key {...getKeyProps(']')}>{}<br/>]</Key>
          <Key width={1.5} {...getKeyProps('\\')}>{}<br/>\</Key>
        </KeyRow>

        {/* ASDF行 */}
        <KeyRow>
          <Key width={1.75} {...getKeyProps('CapsLock')}>Caps</Key>
          <Key {...getKeyProps('a')}>A</Key>
          <Key {...getKeyProps('s')}>S</Key>
          <Key {...getKeyProps('d')}>D</Key>
          <Key {...getKeyProps('f')}>F</Key>
          <Key {...getKeyProps('g')}>G</Key>
          <Key {...getKeyProps('h')}>H</Key>
          <Key {...getKeyProps('j')}>J</Key>
          <Key {...getKeyProps('k')}>K</Key>
          <Key {...getKeyProps('l')}>L</Key>
          <Key {...getKeyProps(';')}>:<br/>;</Key>
          <Key {...getKeyProps("'")}>"<br/>'</Key>
          <Key width={2.25} {...getKeyProps('Enter')}>Enter</Key>
        </KeyRow>

        {/* ZXCV行 */}
        <KeyRow>
          <Key width={2.25} {...getKeyProps('Shift')}>Shift</Key>
          <Key {...getKeyProps('z')}>Z</Key>
          <Key {...getKeyProps('x')}>X</Key>
          <Key {...getKeyProps('c')}>C</Key>
          <Key {...getKeyProps('v')}>V</Key>
          <Key {...getKeyProps('b')}>B</Key>
          <Key {...getKeyProps('n')}>N</Key>
          <Key {...getKeyProps('m')}>M</Key>
          <Key {...getKeyProps(',')}>&lt;<br/>,</Key>
          <Key {...getKeyProps('.')}>&gt;<br/>.</Key>
          <Key {...getKeyProps('/')}>{}<br/>/</Key>
          <Key width={2.75} {...getKeyProps('Shift')}>Shift</Key>
        </KeyRow>

        {/* 空格行 */}
        <KeyRow>
          <Key width={1.25}>Ctrl</Key>
          <Key width={1.25}>Win</Key>
          <Key width={1.25}>Alt</Key>
          <Key width={6.25} {...getKeyProps(' ')}>Space</Key>
          <Key width={1.25}>Alt</Key>
          <Key width={1.25}>Win</Key>
          <Key width={1.25}>Menu</Key>
          <Key width={1.25}>Ctrl</Key>
        </KeyRow>
      </KeyboardContainer>
    </div>
  );
};

export default VirtualKeyboard;